<template>
  <div class="WallMessage-container">
    <h1 class="title">{{ wallType[+route.params.id].title }}</h1>
    <p>{{ wallType[+route.params.id].slogan }}</p>
    <div class="label-container">
      <div class="sort-list" v-show="route.params.id === '0'">
        <p
          class="sort"
          :class="{ selected: wallData.sort === 'create_time' }"
          @click="sort('create_time')"
        >
          按时间
        </p>
        <p
          class="sort"
          :class="{ selected: wallData.sort === 'like_count' }"
          @click="sort('like_count')"
        >
          按点赞
        </p>
        <p
          class="sort"
          :class="{ selected: wallData.sort === 'comment_count' }"
          @click="sort('comment_count')"
        >
          按留言
        </p>
      </div>
      <div class="label-list">
        <p
          class="label"
          :class="{ selected: '全部' === wallData.label }"
          @click="labelSwitch('全部')"
        >
          全部
        </p>
        <p
          class="label"
          v-for="item in labelList[+route.params.id]"
          :class="{ selected: item === wallData.label }"
          :key="item"
          @click="labelSwitch(item)"
        >
          {{ item }}
        </p>
      </div>
      <div class="right" v-show="route.params.id === '0'"></div>
    </div>
    <div class="content">
      <template v-if="route.params.id === '0'">
        <div class="note-list-container">
          <NoteCard
            class="card"
            v-for="item in noteList"
            :key="item.id"
            :note="item"
            @click="open(item.id)"
          ></NoteCard>
        </div>
      </template>
      <template v-else>
        <div class="picture-list-container">
          <div class="picture-item" v-for="item in noteList" :key="item.id">
            <div class="bg" @click="open(item.id, item.image_url)"></div>
            <img class="picture" :src="item.image_url" alt="" />
            <div class="picture-like" @click="like(item)">
              <span class="iconfont icon-aixin1"></span>
              <span class="count">{{ item.like_count }}</span>
            </div>
          </div>
        </div>
        <transition name="view">
          <DetailPicture
            v-if="popupStore.right === '0' && popupStore.storeTitle === '留言详情'"
          ></DetailPicture>
        </transition>
      </template>
      <div class="noList" v-if="!noteList.length">
        <img v-if="route.params.id === '0'" src="../../assets/images/便签.svg" alt="" />
        <img v-else src="../../assets/images/照片.png" alt="" />
        <p>还没有{{ route.params.id === '0' ? '留言' : '便签' }}，快贴上第一张吧</p>
      </div>
    </div>
    <div class="loading">
      <img v-if="!no && asd" src="../../assets/images/加载.svg" alt="" />
    </div>
  </div>
  <Popup></Popup>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import Popup from '@/components/Popup.vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/modules/user'
import { usePopupStore } from '@/stores/modules/Popup'
import NoteCard from '@/components/NoteCard.vue'
import { getNoteListAPI } from '@/api/note'
import { bus } from '@/utils/mitt'
import DetailPicture from './components/DetailPicture.vue'
import { addFeedbackAPI, deleteFeedbackAPI, isFeedbackAPI } from '@/api/note'
import Message from '@/components/Message/Message.js'
import router from '@/router'
import { wallType, labelList } from '@/config'

/** 初始化仓库 */
const userStore = useUserStore()
const route = useRoute()

/** 排序切换回调 */
const sort = (value: string) => {
  wallData.sort = value
  getNoteList()
}
/** 照片墙切换数据 */
const wallData = reactive<GetNoteListParams>({
  sort: 'create_time',
  label: '全部',
  limit: 10
})
/** 标签切换回调 */
const labelSwitch = (name: string) => {
  wallData.label = name
  getNoteList()
}

const asd = ref<boolean>(false)

/** 初始化弹窗仓库 */
const popupStore = usePopupStore()
/** 打开弹窗 */
const open = (id: number, url?: string) => {
  popupStore.open('留言详情', id, url)
}
/** 笔记列表 */
const noteList = ref<Note[]>([])
/** 获取页码 */
const page = ref<number>(1)
/** 是否获取更多 */
const no = ref<boolean>(false)
/** 获取笔记列表 */
const getNoteList = async () => {
  page.value = 1
  const res = await getNoteListAPI(
    Object.assign(wallData, { type: route.params.id, page: page.value })
  )
  noteList.value = res.data
  page.value += 1
}
/** 获取更多留言 */
const getMoreList = async () => {
  asd.value = true
  if (no.value) return
  const res = await getNoteListAPI(
    Object.assign(wallData, { type: route.params.id, page: page.value })
  )
  // 无更多数据数据
  if (!res.data.length) {
    no.value = true
    return
  }
  // 新数据拼接
  res.data.forEach((item) => {
    noteList.value.push(item)
  })
  page.value += 1
}

/** 点赞 */
const like = async (item: Note) => {
  // 获取是否已点赞
  const res = await isFeedbackAPI(userStore.user as string, item.id, 0)
  // 已点赞，取消点赞
  if (res.data) {
    await deleteFeedbackAPI(userStore.user as string, item.like_count, item.id)
    getNoteList()
    Message({ type: 'success', message: '取消成功' })
    return
    // 未点赞，提交点赞
  } else {
    await addFeedbackAPI({
      wall_id: item.id,
      user_id: userStore.user as string,
      type: 0,
      like_count: item.like_count
    })
    Message({ type: 'success', message: '点赞成功' })
    getNoteList()
  }
}

bus.on('getNoteList', getNoteList)
bus.on('getMoreList', getMoreList)

router.afterEach(() => {
  Object.assign(wallData, { sort: 'create_time', label: '全部', limit: 10 })
  page.value = 1
  getNoteList()
})

onMounted(async () => {
  /** 获取用户标识 */
  await userStore.getUser()
  /** 获取笔记列表 */
  getNoteList()
})
</script>

<style scoped lang="scss">
/* 定义无限旋转的动画 */
@keyframes infinite-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.view-enter-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.view-leave-active {
  transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
}

.view-enter-from,
.view-leave-to {
  opacity: 0;
}

.WallMessage-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: $topBar-height;
  min-height: 100vh;

  .title {
    font-size: 56px;
    color: $gray-0;
    font-weight: 600;
    margin-top: 46px;
  }

  .slogan {
    color: $gray-1;
    margin-top: 8px;
  }
  .label-container {
    margin-top: 40px;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;

    .sort-list {
      position: relative;
      flex-wrap: wrap;
      justify-content: center;
      flex: 1;
      align-items: center;
      display: flex;
      cursor: pointer;

      .selected {
        font-weight: 600;

        &::before {
          position: absolute;
          bottom: -3px;
          left: 50%;
          transform: translateX(-50%);
          content: '';
          display: block;
          height: 3px;
          width: 16px;
          border-radius: 2px;
          background: #3b73f0;
        }
      }

      .sort {
        min-width: 60px;
        padding: 0 1vw;
        position: relative;
      }
    }

    .label-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      .label {
        padding: 3px 16px;
        color: $gray-1;
        border: 1px solid rgba($color: $gray-0, $alpha: 0);
        cursor: pointer;
      }

      .selected {
        color: $gray-0;
        font-weight: 600;
        border-radius: 16px;
        border: 1px solid rgba($color: $gray-0, $alpha: 1);
      }
    }

    .right {
      flex: 1;
      min-width: 7vw;
    }
  }

  .content {
    position: relative;
    padding: 0 7vw;
    margin: 30px auto;
    width: 100%;

    .note-list-container {
      position: relative;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(315px, 1fr));
      grid-gap: 15px;
      width: 100%;
      justify-items: center;
      align-items: center;

      .card:hover {
        transform: translateY(-6px);
      }
    }

    .noList {
      width: 100%;
      margin-top: 40px;
      text-align: center;

      img {
        width: 6vw;
      }

      p {
        margin-top: 10px;
        color: $gray-1;
        font-size: 30px;
      }
    }

    .picture-list-container {
      position: relative;
      width: 100%;
      columns: 6;
      column-gap: 6px;

      .picture-item {
        margin-bottom: 6px;
        position: relative;
        cursor: pointer;
        height: auto;
        transition: all 0.3s;

        .bg {
          top: 0;
          left: 0;
          transition: all 0.3s;
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba($gray-0, 0.3);
          opacity: 0;

          &:hover {
            opacity: 1;
          }
        }

        .picture {
          display: flex;
          width: 100%;
          max-height: 600px;
        }

        &:hover .picture-like {
          opacity: 1;
        }
      }

      .picture-like {
        z-index: 9;
        backdrop-filter: blur(20px);
        background-color: rgba($gray-10, 0.8);
        transition: all 0.3s;
        opacity: 0;
        display: flex;
        border-radius: 14px;
        align-items: center;
        padding: 3px 13px;
        position: absolute;
        top: 15px;
        left: 15px;

        .iconfont {
          font-size: 14px;
          color: $gray-2;
        }

        .count {
          padding-left: 5px;
        }
      }

      .noList {
        margin-top: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;

        img {
          width: 6vw;
        }

        p {
          margin-top: 10px;
          color: $gray-1;
          font-size: 30px;
        }
      }
    }
  }

  .loading {
    min-height: 100px;
    margin-top: 60px;
    margin-bottom: 30px;
    display: block;
    text-align: center;

    img {
      width: 6vw;
      animation: infinite-rotation 2s ease-in-out infinite;
    }

    span {
      font-size: 25px;
      color: $gray-2;
    }
  }
}
</style>
